<template>
    <avue-crud ref="userRef" :table-loading="tableLoading" :option="option" @refresh-change="getList" :data="data"
        :page="page" @size-change="sizeChange" @current-change="currentChange" @search-change="searchChange"
        @search-reset="searchReset" @row-save="rowSave">
        <template #menu="{ row, index, size }">
            <el-button type="primary" text @click="userDetail(row)">编辑</el-button>

            <el-button type="danger" text @click="del(row.promoter, row.pass)">删除</el-button>


        </template>
    </avue-crud>

    <DetailDialog :visible="detailVisible" v-model="detailVisible" :detailData="detail_data"
        @update:visible="detailVisible = $event" />

</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
import user from "@/options/userCtl/userMonitor";
import DetailDialog from '@/components/DetailDialog.vue';
import { ElMessageBox, ElMessage } from "element-plus";
import {
    markUser,
    getUserInfo,
    getUserFlow,
    get_user_monitor,
    add_user_monitor,
    del_user_monitor
} from "@/apis/admin";
import { useRouter } from "vue-router";
import { id } from "element-plus/es/locales.mjs";


const flowUserId = ref("");

const detailVisible = ref(false);


onMounted(() => {
    getList();
});
const searchChange = (form, done) => {
    page.searchInfo = form;
    page.currentPage = 1;
    getList();
    done();
};
const rowSave = (row, done) => {
    console.log('rowSave---', row)
    add_user_monitor.post("", {
        addUser: {
            id: 1,
            promoter: Number(row.promoter) || -1,
            pass: row.pass || ""
        }

    }).then((res) => {
        if (res.code == 200) {
            ElMessage.success("添加成功!");
            getList();
        }
    })
    done();
};
const searchReset = () => {
    page.searchInfo = {};
    page.currentPage = 1;
    getList();
};

const detail_data = ref({});

const userDetail = (data) => {
    console.log('userDetail---')
    getUserInfo.post("", {
        userId: data.userId
    }).then((res) => {
        detail_data.value = res.data;
        detailVisible.value = true;
    })
    flowUserId.value = data.userId;
};

const del = (id, type) => {
    console.log('del---', id, type)
    let msg = "";
    if (type == "1") {
        msg = "确定删除监控";
    }
    ElMessageBox.confirm(msg, "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        del_user_monitor.post("", { promoter: id, pass: type }).then((res) => {
            if (res.code == 200) {
                ElMessage.success("修改成功!");
                getList();
            }
        });
    });
};
const option = user;
const page = reactive({
    total: 0,
    searchInfo: {},
    currentPage: 1,
    pageSize: 10,
});
const sizeChange = (val) => {
    page.pageSize = val;
    getList();
};
const currentChange = (val) => {
    page.currentPage = val;
    getList();
};
const data = ref([]);
const tableLoading = ref(false);
const getList = async () => {
    tableLoading.value = true;
    const res = await get_user_monitor.post("", {
    });
    tableLoading.value = false;
    if (res.code == 200) {
        page.total = res.data.total;
        data.value = res.data.lists || [];
    }

    const res2 = await get_user_monitor.post("", {
    });
    console.log('res2---', res2)
};

const formatDate = (date, cut) => {
    var date = new Date(date);
    var YY = date.getFullYear() + cut;
    var MM =
        (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + cut;
    var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var hh = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
    var mm = (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) + ":";
    var ss = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    return YY + MM + DD + " " + hh + mm + ss;
};
</script>
<style lang="scss" scoped>
.subtitle {
    width: 100%;
    border-radius: 4px;
    background: #f5f5f5;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    box-sizing: border-box;
    padding: 8px 10px;
    margin: 10px 0;
}

.label {
    color: #666;
    font-size: 12px;
    padding-right: 8px;
}

.value {
    color: #333;
    font-size: 13px;
}

.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 9999;
    overflow: auto;
}
</style>